<template>
    <div class="Livebroadcastcardpurchases">
        <div class="Livebroadcastcardpurchase">
            <div class="Livebroadcastcardpurchase-head">
                <h1>直播课程次卡</h1>
            </div>
            <div class="Livebroadcastcardpurchase-input">
                <label>
                    <input type="text" @focus="focuns()" placeholder="请输入数量" name="Purchasequantity" v-model="Purchasequantity" @input="checkNumber"/><span>×节</span>
                    <span>30元/节</span>
                </label>
                
            </div>
            <div class="Livebroadcastcardpurchase-select">
                <label>
                    <ul>
                        <li>套餐一</li>
                        <li>套餐二</li>
                        <li>套餐三</li>
                    </ul>
                </label>
                <ul>
                    <li v-for="(item,index) in priceList" :key="index" @click="goselect(index,item)" >
                        <label :class="priceListIndex ==index?'navelecet':''" v-if="item.commodity_type == 'set_meal'">
                            <span>￥{{item.price}}</span>
                            <span>{{item.curriculum_num}}节课程</span>
                            <span>送{{item.give_curriculum}}节</span>
                        </label>
                    </li>
                </ul>
            </div>
            <div class="Livebroadcastcardpurchase-shuoming">
                <label>
                    <div>
                        <span>权益说明：</span>
                        <ul>
                            <li>次卡，是每次扣除一次次卡</li>
                            <li>用于观看直播课程，语言不限</li>
                            <li>不得转让，一经购买不得退回</li>
                            <li>有效期一年，过期作废</li>
                        </ul>
                    </div>
                </label>
            </div>
            <div class="Theamountof">
                <label>
                    <span>实付金额：</span>
                    <span v-if="Purchasequantity == ''">{{price}}元</span>
                    <span v-else>{{Purchasequantity * 30}}元</span>
                </label>
            </div>
            <!-- <div class="shopqrcode">
                <label>
                    <img src="/images/二维码图片png.png"/>
                </label>
            </div>
            <div class="Theamountof-way">
                <label>
                    <span> 支付宝支付</span>
                </label>      
            </div> -->
            <label class="agreement">
                <el-checkbox v-model="agree" @change="Toread()">我同意《外教超市学习卡购买协议》</el-checkbox>
            </label>
            
            <div class="Theamountof-payment">
                <label>
                    <span @click="ToBuyclass()">确认付款</span>
                </label>
            </div>
        </div>
        <div class="readagreements" v-show="Isread">
            <div class="readagreement">
                <learnCardxieyi></learnCardxieyi>
                <label class="agreement">
                    <el-checkbox v-model="agree" @change="TocloseRead">购买即代表同意《外教超市学习卡购买协议》</el-checkbox>
                </label>
            </div>
        </div>
    </div>
</template>
<script>
import learnCardxieyi from './learnCardxieyi'
export default {
    name:'Livebroadcastcardpurchases',
    data(){
        return{
            priceList:[],
            userinfo:JSON.parse(localStorage.getItem('userinfo')),
            priceListIndex:'',
            Purchasequantity:0,
            Purchasequantitys:0,
            price:'',
            class_card_id:'',
            Isread:false,
            agree:false,
        }
    },
    components: {//组件注册
        learnCardxieyi,
    },
    mounted(){
        this.GetLists()
    },
    methods: {
        Toread(){
            this.Isread = true
            this.agree  =false
        },
        TocloseRead(){
            this.Isread = false
            this.agree  =true
        },
        checkNumber(){
            if(this.Purchasequantity.length>4){
                this.Purchasequantity = this.Purchasequantity.substr(0,4)
            }
            this.Purchasequantity=this.Purchasequantity.replace(/[^0-9]/g, '')
            console.log(this.Purchasequantity)

        },
        goselect(e,item){//选项卡切换
        console.log(e,item)
            this.priceListIndex = e
            this.Purchasequantity = ''
            this.price = item.price
            this.class_card_id = item.id
            if(this.priceListIndex == 0){
                this.Purchasequantitys = item.curriculum_num+item.give_curriculum
            }else if(this.priceListIndex == 1){
                this.Purchasequantitys = item.curriculum_num+item.give_curriculum
            }else{
                this.Purchasequantitys = item.curriculum_num+item.give_curriculum
            }
        },
        focuns(){
        //    this.price = 0 
        //    this.Purchasequantitys =0
           this.priceListIndex = -1
        },
        GetLists(){
            var data = {
                user_id:this.userinfo.user_id,
                type:'curriculum',
                status:1,
                platform: 'android'
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/classcard/queryManagerListPage',
                params:data,
            }).then((res) =>{
               this.priceList = res.data.data.rows
               console.log(this.priceList,'直拨卡列表')
               this.priceList.forEach(e => {
                   if(e.commodity_type == 'single_product'){
                       this.minid = e.id
                   }
               });
               this.priceList.splice(3,1)
               this.goselect(0,this.priceList[0])
            }).catch((error) =>{
                console.log(error)
            })
        },
        ToBuyclass(){
            if(this.agree){
                if(this.Purchasequantitys == 0){
                    var prcies = this.Purchasequantity*30
                    var Purchasequantitys = this.Purchasequantity
                }else{
                var prcies =  this.price
                var Purchasequantitys = this.Purchasequantitys
                }
                let data = {
                    user_id:this.userinfo.user_id,
                    rcharge_type:'account',
                    amount:this.Purchasequantity * 30,//充值金额
                    source:'pc',
                    rcharge_type:'class_card',
                    class_card_id:this.priceListIndex == -1? this.minid : this.class_card_id,
                    course_num:this.priceListIndex == -1?this.Purchasequantity : 1
                }
                console.log(data,'===>')
                this.$axios({
                    method:'POST',
                    url:'http://101.37.66.151:8768/eg-api/user/pay/aliPay',
                    data:data,
                }).then((res) =>{
                    console.log(res.data.data)
                    var data = res.data.data
                    document.querySelector('body').innerHTML = res.data.data;
                    const div = document.createElement('div') // 创建div
                    div.innerHTML = res.data.data // 将返回的form 放入div
                    document.body.appendChild(div)
                    document.forms[0].submit()
                }).catch((error) =>{
                    console.log(error)
                })
            }else{
                this.$message({message:'请同意购买协议',type:'error',duration:1000})
            }
            
        }
    }
}
</script>
<style lang="less" scoped>
.readagreements{
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1008;
  top: 0;
  left: 0;
}
.agreement {
  display: inline-block;
  width: 100%;
  text-align: center;
  margin-top: 30px;
  color: #ffffff;
  padding-bottom: 20px;
}
.readagreement{
  position: fixed;
  font-size: 24px;
  height: 710px;
  width: 560px;
  background-color: #fdfdfd;
  left: 50%;
  top: 50%;
  overflow: auto;
  transform: translate(-50%, -50%);
  z-index: 1002;
}
    .Livebroadcastcardpurchases{
        position: relative;
        width: 100%;
        background: #ffffff;
    }
    .Livebroadcastcardpurchase{
        position: relative;
        width: 90%;
        margin: 0 auto;
    }
    .Livebroadcastcardpurchase-head{
        position: relative;
        width: 100%;
        height: 160px;
        line-height: 160px;
        text-align: center;
        color: #2DC7C8;
        font-size: 18px;
    }
    .Livebroadcastcardpurchase-select{
        position: relative;
        width: 100%;    
    }
    .Livebroadcastcardpurchase-select>label{
        display: flex;
        ul{
            display: flex;
            width: 100%;
            list-style: none;
            padding: 0;
            justify-content: space-between;
            li{
                width: 33%;
                text-align: center;
                color: #2DC7C8;
                font-size: 24px;
                font-weight: bold;
            }
        }
    }
    .Livebroadcastcardpurchase-select>ul{
        display: flex;
        width: 100%;
        height: 230px;
        list-style: none;
        padding: 0;
        justify-content: space-between;
        li{
            width: 33%;
            text-align: center;
            color: #2DC7C8;
            label{
                position: relative;
                width: 80%;
                height: 230px;
                margin: 0 auto;
                cursor: pointer;
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                border:1px solid rgba(51,197,198,1);
                border-radius:10px;
                span{
                    width: 100%;
                    height: 20px;
                    margin-top: 10px;
                    &:first-child{
                        font-size: 28px;
                        margin-top: 30px;
                    }
                }
            }
        }
    }
    .navelecet{
        background: #33C5C6;
        color: #ffffff;
    }
    .Livebroadcastcardpurchase-input{
        display: flex;
        width: 100%;
        height: 165px;
        justify-content: space-between;
    }
    .Livebroadcastcardpurchase-shuoming{
        display: flex;
        width: 100%;
        height: 200px;
        justify-content: space-between;
        margin-top: 60px;
        label{
            div{
                ul{
                    li{
                        width: 100%;
                        margin-top: 10px;
                    }
                }
            }
            
        }

    }
    .Livebroadcastcardpurchase-input>label{
        width: 100%;
        height: 116px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        background: #2DC7C8;
        color: #FFFFFF;
        border-radius: 20px;
        font-size: 20px;
        input{
            width: 23%;
            height:40px;
            border:1px solid rgba(255,255,255,1);
            border-radius:20px;
            outline: none;
            padding-left: 4%;
        }
        span{
            margin-left: 20px;
        }
        p{
            display: block;
            width: 100%;
            text-align: center;
            font-size: 16px;
        }
    }
    .Livebroadcastcardpurchase-shuoming>label{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
        height: 100%;
        justify-content: left;
        border: 1px dashed #4ecfcf;
        border-radius: 20px;
        span{
            display: inline-block;
            width: 100%;
            // height: 40px;
            color: #FF7336;
            padding-left: 4%;
        }
        ul{
            display: flex;
            padding-left: 4%;
            flex-wrap: wrap;
            list-style-position: inside;
            font-size: 14px;
            text-align: left;
        }
    }
    .Theamountof{
        position: relative;
        width: 30%;
        height: 60px;
        text-align: center  ;
        margin: 0 auto;
        margin-top: 80px;
        label{
            display: flex;
            width: 100%;
            height:100%;
            border:1px solid rgba(45,199,200,1);
            border-radius:40px;
            justify-content: center;
            align-items: center;
            span{
                &:last-child{
                    font-size: 26px;
                    color: #FF4E4E;
                    font-weight: bold;
                }
            }
        }
    }
    .shopqrcode{
        position: relative;
        width:12%;
        height: 73px;
        text-align: center  ;
        margin: 0 auto;
        margin-top: 20px;
        label{
            display: flex;
            width: 100%;
            height:83px;
            justify-content: center;
            align-items: center;
            border:1px solid rgba(78,207,207,1);
            border-radius:10px;
            img{
                width:auto;
                height:auto;
                max-width:90%;
                max-height:90%;
            }
        }
    }
    .Theamountof-way,.Theamountof-agreement,.Theamountof-payment{
        position: relative;
        width:20%;
        height: auto    ;
        text-align: center  ;
        margin: 0 auto;
        margin-top: 20px;
    }
    .Theamountof-agreement{
        width: 40%;
        color: #3ACBCC;
        font-size: 14px;
    }
    .Theamountof-payment{
        padding-bottom: 60px;
        span{
            display: inline-block;
            width: 100%;
            height: 40px;
            line-height: 40px;
            background:rgba(58,203,204,1);
            border-radius:20px;
            color: #ffffff;
            cursor: pointer;
        }
    }
</style>